<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>实现HTTP服务器</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

</head>

<body>
    <div class="container">
        <div class="page-header">
            <h1>从0到1实现HTTP服务器
                <small> —— by 咚咚呛</small>
                <button type="submit" style="float:right" class="btn btn-default btn-lg" data-toggle="modal"
                    data-target="#loginModal">
                    Login
                </button>
            </h1>
        </div>
    <div class="col-md-10 col-md-offset-1">
        <div>
            <h2>老师的课程：</h2>
            <h4><a href="https://coding.imooc.com/class/355.html">《编程必备基础知识：计算机组成原理、操作系统、计算机网络》</a></h4>
            <h4><a href="https://coding.imooc.com/class/311.html">《Django 2.0+微信小程序打造个人助手》</a></h4>
            <h4><a href="https://www.imooc.com/learn/1110">《三小时带你入门Django框架》</a></h4>
        </div>
        <div>
            <h2>老师的公众号：</h2>
            <h4>名称：了不起的咚咚呛</h4>
            <h4>二维码：</h4>
            <img src="accounts.png" class="img-responsive" alt="Responsive image">
        </div>
    </div>
        <!-- Button trigger modal -->


        <!-- Modal -->
        <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="loginModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <form id="login">
                            <div class="form-group">
                                <label for="inputUsername">Username</label>
                                <input class="form-control" id="inputUsername" placeholder="Username">
                            </div>
                            <div class="form-group">
                                <label for="inputPassword">Password</label>
                                <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" onclick="submitData()">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    function submitData() {
        var username = $("#inputUsername").val();
        var password = $("#inputPassword").val();
        if (username.length == 0 || password.length == 0) {
            alert("账户或密码为空！")
        } else {
            $.ajax({
                type: 'POST',
                url: 'http://localhost:8888/api/login',
                data: JSON.stringify({
                    "username": username,
                    "password": password
                }),
                dataType: 'json',
                success: function (data) {
                    if (data.message == 'success') {
                        $('#loginModal').modal('hide');
                        console.log('success');
                        window.location="http://www.imooc.com/t/350968";
                    } else {
                        alert('账号密码校验失败');
                    }
                }
            })
        }
    };

</script>

</html>